import { Tabs } from 'expo-router';
import React from 'react';
import { Platform, StatusBar } from 'react-native';

import { HapticTab } from '@/components/HapticTab';
import { IconSymbol } from '@/components/ui/IconSymbol';
import TabBarBackground from '@/components/ui/TabBarBackground';
import { Colors } from '@/constants/Colors';
import { useColorScheme } from '@/hooks/useColorScheme';
import { Icon } from '@rneui/themed';
export default function TabLayout() {
  const colorScheme = useColorScheme();

  return (
    <Tabs
      screenOptions={{
        tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
        headerShown: false,
        // tabBarButton: HapticTab,
        tabBarBackground: TabBarBackground,
        tabBarStyle: Platform.select({
          ios: {
            // Use a transparent background on iOS to show the blur effect
            position: 'absolute',
          },
          default: {

          },
        }),
      }}

      screenListeners={{
        tabPress: ({ target }) => {
          if (target?.startsWith("mine")) {
            StatusBar.setBackgroundColor("#fff");
          } else {
            StatusBar.setBackgroundColor("transparent");
          }
        }
      }}
    >
      <Tabs.Screen
        name="index"
        options={{
          title: '时讯',
          tabBarIcon: ({ color, focused }) =>
          (
            focused ?
              <Icon
                color={color}
                name="newspaper-variant"
                size={24}
                type="material-community"
              /> :
              <Icon
                color={color}
                name="newspaper-variant-outline"
                size={24}
                type="material-community"
              />
          )
        }}
      />
      {/* <Tabs.Screen
        name="shop"
        options={{
          title: '商城',
          tabBarIcon: ({ color, focused }) =>
          (
            focused ?
              <Icon
                color={color}
                name="shopping"
                size={24}
                type="material-community"
              /> :
              <Icon
                color={color}
                name="shopping-outline"
                size={24}
                type="material-community"
              />
          )
        }}
      /> */}
      <Tabs.Screen
        name="explore"
        options={{
          title: '朋友圈',
          tabBarIcon: ({ color, focused }) =>
          (
            focused ?
              <Icon
                color={color}
                name="map"
                size={25}
                type="material-community"
              /> :
              <Icon
                color={color}
                name="map-outline"
                size={25}
                type="material-community"
              />
          )
        }}
      />
      <Tabs.Screen
        name="message"
        options={{
          title: '消息',
          tabBarIcon: ({ color, focused }) =>
          (
            focused ?
              <Icon
                color={color}
                name="message-processing"
                size={23}
                type="material-community"
              /> :
              <Icon
                color={color}
                name="message-processing-outline"
                size={23}
                type="material-community"
              />
          )
        }}
      />
      <Tabs.Screen
        name="mine"
        options={{
          title: '我的',
          tabBarIcon: ({ color, focused }) =>
          (
            focused ?
              <Icon
                color={color}
                name="account"
                size={28}
                type="material-community"
              /> :
              <Icon
                color={color}
                name="account-outline"
                size={28}
                type="material-community"
              />
          )
        }}
      />
    </Tabs>
  );
}
